<template>
  <el-breadcrumb
    v-if="getBreadcrumb.length"
    class="!leading-[50px] select-none"
    separator="/"
  >
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        class="!inline !items-stretch"
        v-for="(item, index) in getBreadcrumb"
        :key="index"
      >
        <a>
          {{ item.text }}
        </a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useMenuHooks } from "@/core/pinia/store/menu.store";
import { IMenu } from "@/core/pinia/interface";
const menuHooks = useMenuHooks();

const getBreadcrumb = computed<IMenu[]>(() => {
  const hiden = menuHooks.getDefaultActive.hideInBreadcrumb;
  if (hiden) {
    return [];
  }
  const { arr } = menuHooks.getTreeTextArray(menuHooks.menus);
  if (arr.length > 0 && arr[0].hideInBreadcrumb) {
    return [];
  }
  return arr;
});
</script>
